<svg viewBox='0 0 800 320' class='fm-chart'>
  <style type='text/css'>
  <![CDATA[
  .fm-chart text, .fm-tooltip {
    font-family: "Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;
    font: 10px sans-serif;
  }

  .fm-chart .axis .stroke {
    stroke: #aaa;
    stroke-width: 1px;
  }

  .fm-chart .axis .tick {
    stroke: #aaa;
    stroke-width: 1px;
  }

  .fm-chart .axis .label, .axis .title {
    fill: #666;
  }

  .fm-chart .axis .label {
    font-size: 10px;
  }

  .fm-chart .axis .title {
    font-size: 10px;
  }

  .fm-chart .chart-title {
    font-size: 12px;
    font-weight: bold;
  }

  .fm-chart .chart-subtitle {
    font-size: 10px;
  }

  .fm-chart text.label {
    fill: #666;
  }

  .fm-chart .legend text {
    font-size: 10px;
    fill: #333;
  }

  .fm-chart .legend text.title {
    fill: #666;
  }

  .fm-chart .line {
    fill: none;
    stroke: #000;
  }

  .fm-chart .area {
    opacity: 0.8;
  }

  .fm-chart .grid .gridline {
    stroke: #ddd;
    stroke-width: 0.02em;
  }

  .fm-chart .bar,
  .fm-chart .point,
  .fm-chart .area {
    fill: #000;
  }

  .fm-chart .bar.color6,
  .fm-chart .point.color6,
  .fm-chart .area.color6 {
    fill: #db843d;
  }

  .fm-chart .lines .line.color6 {
    strok: #db843d;
  }

  .fm-chart .bar.color5,
  .fm-chart .point.color5,
  .fm-chart .area.color5 {
    fill: #3d96ae;
  }

  .fm-chart .lines .line.color5 {
    stroke: #3d96ae;
  }

  .fm-chart .bar.color4,
  .fm-chart .point.color4,
  .fm-chart .area.color4 {
    fill: #80699b;
  }

  .fm-chart .line.color4 {
    stroke: #80699b;
  }

  .fm-chart .bar.color3,
  .fm-chart .point.color3,
  .fm-chart .area.color3 {
    fill: #89a54e;
  }

  .fm-chart .line.color3 {
    stroke: #89a54e;
  }

  .fm-chart .bar.color2,
  .fm-chart .point.color2,
  .fm-chart .area.color2 {
    fill: #aa4643;
  }

  .fm-chart .line.color2 {
    stroke: #aa4643;
  }

  .fm-chart .bar.color1,
  .fm-chart .point.color1,
  .fm-chart .area.color1 {
    fill: #4572a7;
  }

  .fm-chart .line.color1 {
    stroke: #4572a7;
  }

  .fm-chart.bar.vertical .axis.left .stroke,
  .fm-chart.bar.vertical .axis.left .tick,
  .fm-chart.bar.vertical .axis.right .stroke,
  .fm-chart.bar.vertical .axis.right .tick {
    display: none;
  }

  .fm-tooltip {
    text-align: center;
    padding: 5px 7px;
    color: #fff;
    background: #333;
    border-radius: 3px;
    font-size: 13px;
  }
  ]]>
  </style>
  <g class='axis bottom'>
    <text x='50.000000' y='12.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >10.0</text>
    <text x='150.000000' y='12.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >15.7</text>
    <text x='250.000000' y='12.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >21.4</text>
    <text x='350.000000' y='12.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >27.1</text>
    <text x='450.000000' y='12.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >32.9</text>
    <text x='550.000000' y='12.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >38.6</text>
    <text x='650.000000' y='12.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >44.3</text>
    <text x='750.000000' y='12.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >50.0</text>
    <line x1='50.000000' y1='25.000000' x2='50.000000' y2='30.000000' class='tick' />
    <line x1='150.000000' y1='25.000000' x2='150.000000' y2='30.000000' class='tick' />
    <line x1='250.000000' y1='25.000000' x2='250.000000' y2='30.000000' class='tick' />
    <line x1='350.000000' y1='25.000000' x2='350.000000' y2='30.000000' class='tick' />
    <line x1='450.000000' y1='25.000000' x2='450.000000' y2='30.000000' class='tick' />
    <line x1='550.000000' y1='25.000000' x2='550.000000' y2='30.000000' class='tick' />
    <line x1='650.000000' y1='25.000000' x2='650.000000' y2='30.000000' class='tick' />
    <line x1='750.000000' y1='25.000000' x2='750.000000' y2='30.000000' class='tick' />
    <line x1='50.000000' y1='25.000000' x2='750.000000' y2='25.000000' class='stroke' />
  </g>
  <g class='axis right'>
    <text x='760.000000' y='295.000000' style='text-anchor:start; dominant-baseline:middle;' class='label' >0</text>
    <text x='760.000000' y='256.428571' style='text-anchor:start; dominant-baseline:middle;' class='label' >7.14</text>
    <text x='760.000000' y='217.857143' style='text-anchor:start; dominant-baseline:middle;' class='label' >14.3</text>
    <text x='760.000000' y='179.285714' style='text-anchor:start; dominant-baseline:middle;' class='label' >21.4</text>
    <text x='760.000000' y='140.714286' style='text-anchor:start; dominant-baseline:middle;' class='label' >28.6</text>
    <text x='760.000000' y='102.142857' style='text-anchor:start; dominant-baseline:middle;' class='label' >35.7</text>
    <text x='760.000000' y='63.571429' style='text-anchor:start; dominant-baseline:middle;' class='label' >42.9</text>
    <text x='760.000000' y='25.000000' style='text-anchor:start; dominant-baseline:middle;' class='label' >50.0</text>
    <line x1='750.000000' y1='295.000000' x2='745.000000' y2='295.000000' class='tick' />
    <line x1='750.000000' y1='256.428571' x2='745.000000' y2='256.428571' class='tick' />
    <line x1='750.000000' y1='217.857143' x2='745.000000' y2='217.857143' class='tick' />
    <line x1='750.000000' y1='179.285714' x2='745.000000' y2='179.285714' class='tick' />
    <line x1='750.000000' y1='140.714286' x2='745.000000' y2='140.714286' class='tick' />
    <line x1='750.000000' y1='102.142857' x2='745.000000' y2='102.142857' class='tick' />
    <line x1='750.000000' y1='63.571429' x2='745.000000' y2='63.571429' class='tick' />
    <line x1='750.000000' y1='25.000000' x2='745.000000' y2='25.000000' class='tick' />
    <line x1='750.000000' y1='25.000000' x2='750.000000' y2='295.000000' class='stroke' />
  </g>
  <g class='axis bottom'>
    <text x='50.000000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >10.0</text>
    <text x='150.000000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >15.7</text>
    <text x='250.000000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >21.4</text>
    <text x='350.000000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >27.1</text>
    <text x='450.000000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >32.9</text>
    <text x='550.000000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >38.6</text>
    <text x='650.000000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >44.3</text>
    <text x='750.000000' y='307.500000' style='text-anchor:middle; dominant-baseline:central;' class='label' >50.0</text>
    <line x1='50.000000' y1='295.000000' x2='50.000000' y2='290.000000' class='tick' />
    <line x1='150.000000' y1='295.000000' x2='150.000000' y2='290.000000' class='tick' />
    <line x1='250.000000' y1='295.000000' x2='250.000000' y2='290.000000' class='tick' />
    <line x1='350.000000' y1='295.000000' x2='350.000000' y2='290.000000' class='tick' />
    <line x1='450.000000' y1='295.000000' x2='450.000000' y2='290.000000' class='tick' />
    <line x1='550.000000' y1='295.000000' x2='550.000000' y2='290.000000' class='tick' />
    <line x1='650.000000' y1='295.000000' x2='650.000000' y2='290.000000' class='tick' />
    <line x1='750.000000' y1='295.000000' x2='750.000000' y2='290.000000' class='tick' />
    <line x1='50.000000' y1='295.000000' x2='750.000000' y2='295.000000' class='stroke' />
  </g>
  <g class='axis left'>
    <text x='40.000000' y='295.000000' style='text-anchor:end; dominant-baseline:middle;' class='label' >0</text>
    <text x='40.000000' y='256.428571' style='text-anchor:end; dominant-baseline:middle;' class='label' >7.14</text>
    <text x='40.000000' y='217.857143' style='text-anchor:end; dominant-baseline:middle;' class='label' >14.3</text>
    <text x='40.000000' y='179.285714' style='text-anchor:end; dominant-baseline:middle;' class='label' >21.4</text>
    <text x='40.000000' y='140.714286' style='text-anchor:end; dominant-baseline:middle;' class='label' >28.6</text>
    <text x='40.000000' y='102.142857' style='text-anchor:end; dominant-baseline:middle;' class='label' >35.7</text>
    <text x='40.000000' y='63.571429' style='text-anchor:end; dominant-baseline:middle;' class='label' >42.9</text>
    <text x='40.000000' y='25.000000' style='text-anchor:end; dominant-baseline:middle;' class='label' >50.0</text>
    <line x1='50.000000' y1='295.000000' x2='55.000000' y2='295.000000' class='tick' />
    <line x1='50.000000' y1='256.428571' x2='55.000000' y2='256.428571' class='tick' />
    <line x1='50.000000' y1='217.857143' x2='55.000000' y2='217.857143' class='tick' />
    <line x1='50.000000' y1='179.285714' x2='55.000000' y2='179.285714' class='tick' />
    <line x1='50.000000' y1='140.714286' x2='55.000000' y2='140.714286' class='tick' />
    <line x1='50.000000' y1='102.142857' x2='55.000000' y2='102.142857' class='tick' />
    <line x1='50.000000' y1='63.571429' x2='55.000000' y2='63.571429' class='tick' />
    <line x1='50.000000' y1='25.000000' x2='55.000000' y2='25.000000' class='tick' />
    <line x1='50.000000' y1='25.000000' x2='50.000000' y2='295.000000' class='stroke' />
  </g>
  <g class='areas'>
    <circle cx='50.000000' cy='111.400000' r='3.000000' class='point color1' fm:label='10.000000: 34.000000' fm:series='unnamed', style=''></circle>
    <circle cx='137.500000' cy='89.800000' r='3.000000' class='point color1' fm:label='15.000000: 38.000000' fm:series='unnamed', style=''></circle>
    <circle cx='225.000000' cy='62.800000' r='3.000000' class='point color1' fm:label='20.000000: 43.000000' fm:series='unnamed', style=''></circle>
    <circle cx='400.000000' cy='116.800000' r='3.000000' class='point color1' fm:label='30.000000: 33.000000' fm:series='unnamed', style=''></circle>
    <circle cx='575.000000' cy='181.600000' r='3.000000' class='point color1' fm:label='40.000000: 21.000000' fm:series='unnamed', style=''></circle>
    <circle cx='750.000000' cy='116.800000' r='3.000000' class='point color1' fm:label='50.000000: 33.000000' fm:series='unnamed', style=''></circle>
    <path stroke-width='2.000000' class='area color1' style='' d='M50.000000 111.400000 L137.500000 89.800000 L225.000000 62.800000 L400.000000 116.800000 L575.000000 181.600000 L750.000000 116.800000 L750.000000 295.000000 L575.000000 295.000000 L400.000000 295.000000 L225.000000 295.000000 L137.500000 295.000000 L50.000000 295.000000 ' />
    <path stroke-width='2.000000' class='line color1' style='' d='M50.000000 111.400000 L137.500000 89.800000 L225.000000 62.800000 L400.000000 116.800000 L575.000000 181.600000 L750.000000 116.800000 ' />
  </g>
</svg>
